<template>
  <div class="departments">
    <h1>组织架构</h1>
    <div class="app-container">
      <el-card style="padding:20px">
        <!-- 头部左右布局 -->
        <tree-tools
          :node-data="{name:'传智教育',manager:'负责人',id:''}"
          style="border-bottom:1px solid #ccc ;padding:10px"
          :is-root="false"
          @showDialog="addition"
        />
        <!-- date属性是树形 -->
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <template #default="{data}">
            <tree-tools :node-data="data" @reload="getDeptList" @showDialog="addition" @editDialog="editDialog" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门对话框 -->
    <add-detps
      ref="addDeptesRef"
      :visible.sync="visible"
      :depts-list="deptsList"
      :source-depts="sourceDepts"
      @sloseDialog="visible=false;getDeptList()"
    />
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { reqGetDeptslist } from '@/api/departrents'
import { reanListToTreeData } from '@/utils/departments'
import AddDetps from './components/add-detps.vue'
export default {
  name: 'Departments',
  components: { treeTools, AddDetps },
  data() {
    return {
      list: [], // 部门列表数据
      visible: false, // 控制对话框的布尔值
      defaultProps: {
        label: 'name'
      },
      deptsList: {}, // 列表式数据
      sourceDepts: []// 部门列表原数据
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    async getDeptList() {
      const { data: { depts }} = await reqGetDeptslist()
      // 原数据储存到父组件
      this.sourceDepts = depts
      // console.log(depts)
      // console.log(depts)
      // 部门列表数据做处理之后在在进行赋值
      this.list = reanListToTreeData(depts, '')
    },
    addition(a) {
      this.visible = true
      this.deptsList = a
      this.$refs.addDeptesRef.title = '添加部门'
    },
    editDialog(a) {
      this.visible = true
      this.deptsList = a
      // 调用子组件add-detps的方法获取部门信息
      this.$refs.addDeptesRef.getDeptInFo(a.id)
      this.$refs.addDeptesRef.title = '编辑部门'
    }

  }

}
</script>

<style lang='scss' scoped>
// 直接覆盖树形样式即可
::v-deep .el-tree .el-tree-node__content {
      margin: 5px !important;
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/jiahao.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/jianhao.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/ren.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
}
</style>
